<template>
    <div class="footer">
        <p class="choose" v-if="this.type == 'download'">已选择{{ this.chooseCount }}项</p>
        <div class="btns">
            <a
                class="btn"
                href="javascript:;"
                v-if="this.type == 'default'"
                @click="multiDownload">下载</a>
            <a
                class="btn orange-btn"
                href="javascript:;"
                v-if="this.type == 'default'"
                @click="toShare">分享</a>
            <a
                class="btn"
                href="javascript:;"
                v-if="this.type == 'detail'"
                @click="toDownload">下载</a>
            <a
                class="btn"
                href="javascript:;"
                v-if="this.type == 'download'"
                @click="toDownload">确定下载</a>
        </div>
        <p class="title">{{ this.title }}</p>
    </div>
</template>

<script>
    import {AlertModule} from 'vux'
    export default {
        name: 'Mfooter',
        mounted() {
        },
        data() {
            return {}
        },
        methods: {
            // 下载文件
            toDownload() {
                // 还要判断是否为空
                let auth = sessionStorage.getItem('MeiJingKu_auth');
                if (auth.toString() == 'false') {
                    this
                        .$vux
                        .toast
                        .text('完善个人资料后才可以进行下载', 'bottom');
                    return false;
                }
                if (this.download.query.length === 0) {
                    this
                        .$vux
                        .toast
                        .text('没有选中的下载内容', 'bottom');
                    return false;
                }
                this
                    .$router
                    .push({
                        name: 'link',
                        query: {
                            q: this.download.query,
                            a: this.download.action
                        }
                    })
            },
            // 多文件下载跳转时增加参数
            multiDownload() {
                let routerName = this.$route.name;
                switch (routerName) {
                    case 'video':
                        this
                            .$router
                            .push({
                                name: 'video_download',
                                query: {
                                    id: this.$route.query.id
                                }
                            });
                        break;
                    case 'photo':
                        this
                            .$router
                            .push({
                                name: 'photo_download',
                                query: {
                                    id: this.$route.query.id
                                }
                            });
                        break;
                }
            },
            toShare() {
                this
                    .$vux
                    .toast
                    .text('请点击右上角进行分享', 'bottom');
                return false;
            }
        },
        props: {
            title: {
                default: ''
            },
            chooseCount: {
                default: 0
            },
            type: {
                default: 'default'
            },
            link: {
                default: ''
            },
            download: {
                default: ''
            },
            pageType: {}
        },
        watch: {}
    }
</script>

<style lang="less" scoped="scoped">
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
        width: 100%;

        .title {
            text-align: center;
            color: #666;
            font-size: 1.4rem;
            line-height: 2.8rem;
        }

        .choose {
            text-align: center;
            color: #aaa;
            font-size: 1.2rem;
            line-height: 3.6rem;
        }

        .btns {
            width: 100%;
            display: block;
            text-align: center;
            margin: 2rem 0;
        }

        .btn {
            color: #fff;
            background: #000;
            text-decoration: none;
            font-size: 1.4rem;
            padding: 0.75rem 2.4rem;
            border-radius: 0.5rem;
            margin: 0 2rem;
            display: inline-block;
            width: 6rem;
        }

        .orange-btn {
            background: #d47501;
        }
    }
</style>